<template>
  <div class="permission-manager">
    <!-- 权限管理头部 -->
    <div class="manager-header">
      <div class="header-tabs">
        <button
          v-for="tab in tabs"
          :key="tab.key"
          :class="{ active: activeTab === tab.key }"
          class="tab-btn"
          @click="activeTab = tab.key"
        >
          <component :is="tab.icon" />
          {{ tab.label }}
        </button>
      </div>
      <div class="header-actions">
        <button class="btn btn-text" @click="refreshData">
          <svg fill="none" viewBox="0 0 24 24">
            <polyline points="23 4 23 10 17 10" stroke="currentColor" stroke-width="2"/>
            <polyline points="1 20 1 14 7 14" stroke="currentColor" stroke-width="2"/>
            <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2"/>
          </svg>
          刷新
        </button>
      </div>
    </div>

    <!-- 文件权限管理 -->
    <div v-if="activeTab === 'files'" class="tab-content">
      <!-- 筛选器 -->
      <div class="filters-section">
        <div class="filters-row">
          <div class="filter-item">
            <label>文件类型</label>
            <select v-model="fileFilter.type" @change="loadMediaFiles">
              <option value="">全部类型</option>
              <option value="image">图片</option>
              <option value="video">视频</option>
              <option value="audio">音频</option>
            </select>
          </div>
          <div class="filter-item">
            <label>权限状态</label>
            <select v-model="fileFilter.permission" @change="loadMediaFiles">
              <option value="">全部权限</option>
              <option value="public">公开</option>
              <option value="family">家庭</option>
              <option value="private">私密</option>
            </select>
          </div>
          <div class="filter-item">
            <label>搜索文件</label>
            <input
              v-model="fileFilter.search"
              placeholder="搜索文件名..."
              type="text"
              @input="searchFiles"
            />
          </div>
        </div>
      </div>

      <!-- 批量操作 -->
      <div v-if="selectedFiles.length > 0" class="batch-actions">
        <div class="selection-info">
          已选择 {{ selectedFiles.length }} 个文件
        </div>
        <div class="action-buttons">
          <button class="btn btn-sm" @click="batchSetPublic">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
              <path d="M2 12h20" stroke="currentColor" stroke-width="2"/>
            </svg>
            设为公开
          </button>
          <button class="btn btn-sm" @click="batchSetFamily">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
              <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
            </svg>
            设为家庭
          </button>
          <button class="btn btn-sm" @click="batchSetPrivate">
            <svg fill="none" viewBox="0 0 24 24">
              <rect height="11" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="11"/>
              <circle cx="12" cy="16" r="1" stroke="currentColor" stroke-width="2"/>
            </svg>
            设为私密
          </button>
        </div>
      </div>

      <!-- 文件列表 -->
      <div class="files-list">
        <div class="list-header">
          <label class="select-all">
            <input
              :checked="isAllSelected"
              type="checkbox"
              @change="toggleSelectAll"
            />
            全选
          </label>
          <div class="header-columns">
            <div class="column file-info">文件信息</div>
            <div class="column permissions">权限设置</div>
            <div class="column access-control">访问控制</div>
            <div class="column actions">操作</div>
          </div>
        </div>

        <div class="files-items">
          <div
            v-for="file in mediaFiles"
            :key="file.id"
            class="file-item"
          >
            <label class="file-select">
              <input
                v-model="selectedFiles"
                :value="file.id"
                type="checkbox"
              />
            </label>

            <div class="file-info">
              <div class="file-thumbnail">
                <img
                  v-if="file.thumbnail"
                  :alt="file.name"
                  :src="file.thumbnail"
                />
                <div v-else :class="file.type" class="file-icon">
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2"/>
                    <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </div>
              </div>
              <div class="file-details">
                <div class="file-name">{{ file.name }}</div>
                <div class="file-meta">
                  <span class="file-size">{{ formatFileSize(file.size) }}</span>
                  <span class="file-date">{{ formatDate(file.createTime) }}</span>
                </div>
              </div>
            </div>

            <div class="permissions-settings">
              <div class="permission-level">
                <select
                  :value="file.permission.viewPermission"
                  @change="updateFilePermission(file, 'viewPermission', $event.target.value)"
                >
                  <option value="all">所有人</option>
                  <option value="family">家庭成员</option>
                  <option value="custom">指定用户</option>
                </select>
              </div>
              <div class="permission-options">
                <label class="permission-checkbox">
                  <input
                    :checked="file.permission.allowDownload"
                    type="checkbox"
                    @change="updateFilePermission(file, 'allowDownload', $event.target.checked)"
                  />
                  下载
                </label>
                <label class="permission-checkbox">
                  <input
                    :checked="file.permission.allowComment"
                    type="checkbox"
                    @change="updateFilePermission(file, 'allowComment', $event.target.checked)"
                  />
                  评论
                </label>
              </div>
            </div>

            <div class="access-control">
              <div v-if="file.permission.viewPermission === 'custom'" class="allowed-users">
                <div class="user-tags">
                  <span
                    v-for="userId in file.permission.allowedUsers"
                    :key="userId"
                    class="user-tag"
                  >
                    {{ getUserName(userId) }}
                    <button @click="removeAllowedUser(file, userId)">×</button>
                  </span>
                  <button class="add-user-btn" @click="showAddUserModal(file)">
                    + 添加用户
                  </button>
                </div>
              </div>
              <div v-else class="access-info">
                <span :class="file.permission.viewPermission" class="access-level">
                  {{ getAccessLevelText(file.permission.viewPermission) }}
                </span>
              </div>
            </div>

            <div class="item-actions">
              <button
                class="action-btn"
                title="详细设置"
                @click="editFilePermissions(file)"
              >
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2"/>
                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
              <button
                class="action-btn"
                title="查看分享"
                @click="viewFileShares(file)"
              >
                <svg fill="none" viewBox="0 0 24 24">
                  <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
                  <circle cx="6" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                  <circle cx="18" cy="19" r="3" stroke="currentColor" stroke-width="2"/>
                  <line stroke="currentColor" stroke-width="2" x1="8.59" x2="15.42" y1="13.51" y2="17.49"/>
                  <line stroke="currentColor" stroke-width="2" x1="15.41" x2="8.59" y1="6.51" y2="10.49"/>
                </svg>
              </button>
            </div>
          </div>
        </div>

        <div v-if="mediaFiles.length === 0" class="empty-state">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2"/>
            <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2"/>
          </svg>
          <p>没有找到符合条件的文件</p>
        </div>
      </div>
    </div>

    <!-- 角色权限管理 -->
    <div v-else-if="activeTab === 'roles'" class="tab-content">
      <div class="roles-management">
        <div class="roles-header">
          <h4>家庭成员角色权限</h4>
          <p>管理不同角色的默认权限设置</p>
        </div>

        <div class="roles-list">
          <div
            v-for="role in roles"
            :key="role.key"
            class="role-item"
          >
            <div class="role-info">
              <div :class="role.key" class="role-icon">
                <component :is="role.icon" />
              </div>
              <div class="role-details">
                <h5>{{ role.name }}</h5>
                <p>{{ role.description }}</p>
              </div>
            </div>

            <div class="role-permissions">
              <div class="permissions-grid">
                <label
                  v-for="permission in availablePermissions"
                  :key="permission.key"
                  class="permission-item"
                >
                  <input
                    :checked="role.permissions.includes(permission.key)"
                    type="checkbox"
                    @change="toggleRolePermission(role, permission.key, $event.target.checked)"
                  />
                  <div class="permission-content">
                    <div class="permission-label">{{ permission.label }}</div>
                    <div class="permission-desc">{{ permission.description }}</div>
                  </div>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 访问日志 -->
    <div v-else-if="activeTab === 'logs'" class="tab-content">
      <div class="access-logs">
        <div class="logs-filters">
          <div class="filter-group">
            <label>时间范围</label>
            <select v-model="logsFilter.timeRange" @change="loadAccessLogs">
              <option value="1d">今天</option>
              <option value="7d">最近7天</option>
              <option value="30d">最近30天</option>
            </select>
          </div>
          <div class="filter-group">
            <label>操作类型</label>
            <select v-model="logsFilter.action" @change="loadAccessLogs">
              <option value="">全部操作</option>
              <option value="view">查看</option>
              <option value="download">下载</option>
              <option value="share">分享</option>
              <option value="permission_change">权限变更</option>
            </select>
          </div>
        </div>

        <div class="logs-list">
          <div
            v-for="log in accessLogs"
            :key="log.id"
            class="log-item"
          >
            <div :class="log.action" class="log-icon">
              <component :is="getLogIcon(log.action)" />
            </div>
            <div class="log-content">
              <div class="log-message">{{ log.message }}</div>
              <div class="log-meta">
                <span class="log-user">{{ log.userName }}</span>
                <span class="log-time">{{ formatDateTime(log.timestamp) }}</span>
                <span v-if="log.ipAddress" class="log-ip">{{ log.ipAddress }}</span>
              </div>
            </div>
            <div :class="log.result" class="log-status">
              <span v-if="log.result === 'success'">成功</span>
              <span v-else-if="log.result === 'denied'">拒绝</span>
              <span v-else>失败</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加用户模态框 -->
    <div v-if="showUserModal" class="user-modal" @click="closeUserModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h4>添加授权用户</h4>
          <button class="modal-close" @click="closeUserModal">×</button>
        </div>
        <div class="modal-body">
          <div class="user-search">
            <input
              v-model="userSearchQuery"
              placeholder="搜索用户名或邮箱..."
              type="text"
              @input="searchUsers"
            />
          </div>
          <div class="user-results">
            <div
              v-for="user in searchResults"
              :key="user.id"
              class="user-result-item"
              @click="addAllowedUser(user)"
            >
              <div class="user-avatar">
                <img v-if="user.avatar" :alt="user.name" :src="user.avatar" />
                <span v-else>{{ user.name.charAt(0) }}</span>
              </div>
              <div class="user-info">
                <div class="user-name">{{ user.name }}</div>
                <div class="user-email">{{ user.email }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { Message } from '@opentiny/vue'
import {
  getMediaPermissions,
  setMediaPermissions,
  batchSetPermissions,
  getFamilyMembers
} from '@/api/share'

const emit = defineEmits(['close'])

// 响应式数据
const activeTab = ref('files')
const selectedFiles = ref<number[]>([])
const mediaFiles = ref<any[]>([])
const accessLogs = ref<any[]>([])
const searchResults = ref<any[]>([])
const showUserModal = ref(false)
const currentFile = ref<any>(null)
const userSearchQuery = ref('')

// 筛选条件
const fileFilter = reactive({
  type: '',
  permission: '',
  search: ''
})

const logsFilter = reactive({
  timeRange: '7d',
  action: ''
})

// 标签页配置
const tabs = [
  { key: 'files', label: '文件权限', icon: 'IconFile' },
  { key: 'roles', label: '角色管理', icon: 'IconUser' },
  { key: 'logs', label: '访问日志', icon: 'IconLog' }
]

// 角色配置
const roles = ref([
  {
    key: 'admin',
    name: '管理员',
    description: '拥有所有权限，可以管理家庭成员和设置',
    icon: 'IconUserCheck',
    permissions: ['view_all', 'download_all', 'upload', 'share', 'delete', 'manage_users', 'manage_permissions']
  },
  {
    key: 'member',
    name: '成员',
    description: '可以上传、查看和下载文件，有限的分享权限',
    icon: 'IconUser',
    permissions: ['view_family', 'download_family', 'upload', 'share_family']
  },
  {
    key: 'viewer',
    name: '访客',
    description: '只能查看已分享的文件，无法上传或修改',
    icon: 'IconEye',
    permissions: ['view_shared']
  }
])

// 权限配置
const availablePermissions = [
  { key: 'view_all', label: '查看所有文件', description: '可以查看家庭中的所有媒体文件' },
  { key: 'view_family', label: '查看家庭文件', description: '可以查看标记为家庭的文件' },
  { key: 'view_shared', label: '查看分享文件', description: '只能查看明确分享给自己的文件' },
  { key: 'download_all', label: '下载所有文件', description: '可以下载所有可见的文件' },
  { key: 'download_family', label: '下载家庭文件', description: '可以下载家庭文件' },
  { key: 'upload', label: '上传文件', description: '可以上传新的媒体文件' },
  { key: 'share', label: '分享文件', description: '可以创建分享链接' },
  { key: 'share_family', label: '家庭内分享', description: '可以在家庭内分享文件' },
  { key: 'delete', label: '删除文件', description: '可以删除自己上传的文件' },
  { key: 'manage_users', label: '管理用户', description: '可以邀请和移除家庭成员' },
  { key: 'manage_permissions', label: '管理权限', description: '可以修改其他成员的权限' }
]

// 计算属性
const isAllSelected = computed(() => {
  return mediaFiles.value.length > 0 && selectedFiles.value.length === mediaFiles.value.length
})

// 工具函数
const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatDate = (date: string) => {
  return new Date(date).toLocaleDateString()
}

const formatDateTime = (date: string) => {
  return new Date(date).toLocaleString()
}

const getUserName = (userId: number) => {
  // 模拟获取用户名
  const users = {
    1: '张三',
    2: '李四',
    3: '王五'
  }
  return users[userId] || `用户${userId}`
}

const getAccessLevelText = (level: string) => {
  const levels = {
    all: '所有人',
    family: '家庭成员',
    custom: '指定用户'
  }
  return levels[level] || level
}

const getLogIcon = (action: string) => {
  const icons = {
    view: 'IconEye',
    download: 'IconDownload',
    share: 'IconShare',
    permission_change: 'IconSettings'
  }
  return icons[action] || 'IconLog'
}

// 事件处理
const refreshData = () => {
  loadMediaFiles()
  loadAccessLogs()
}

const toggleSelectAll = () => {
  if (isAllSelected.value) {
    selectedFiles.value = []
  } else {
    selectedFiles.value = mediaFiles.value.map(file => file.id)
  }
}

const searchFiles = () => {
  // 实现文件搜索逻辑
  loadMediaFiles()
}

const updateFilePermission = async (file: any, field: string, value: any) => {
  try {
    const updatedPermission = { ...file.permission, [field]: value }
    await setMediaPermissions(file.id, updatedPermission)
    file.permission[field] = value
    Message.success('权限更新成功')
  } catch (error) {
    Message.error('权限更新失败')
  }
}

const batchSetPublic = async () => {
  try {
    const permissions = {
      isPublic: true,
      allowedUsers: [],
      viewPermission: 'all' as const,
      downloadPermission: 'all' as const,
      commentPermission: 'all' as const
    }
    await batchSetPermissions(selectedFiles.value, permissions)
    selectedFiles.value = []
    loadMediaFiles()
    Message.success('批量设置成功')
  } catch (error) {
    Message.error('批量设置失败')
  }
}

const batchSetFamily = async () => {
  try {
    const permissions = {
      isPublic: false,
      allowedUsers: [],
      viewPermission: 'family' as const,
      downloadPermission: 'family' as const,
      commentPermission: 'family' as const
    }
    await batchSetPermissions(selectedFiles.value, permissions)
    selectedFiles.value = []
    loadMediaFiles()
    Message.success('批量设置成功')
  } catch (error) {
    Message.error('批量设置失败')
  }
}

const batchSetPrivate = async () => {
  try {
    const permissions = {
      isPublic: false,
      allowedUsers: [],
      viewPermission: 'custom' as const,
      downloadPermission: 'owner' as const,
      commentPermission: 'none' as const
    }
    await batchSetPermissions(selectedFiles.value, permissions)
    selectedFiles.value = []
    loadMediaFiles()
    Message.success('批量设置成功')
  } catch (error) {
    Message.error('批量设置失败')
  }
}

const editFilePermissions = (file: any) => {
  // 打开详细权限设置对话框
  console.log('编辑文件权限:', file)
}

const viewFileShares = (file: any) => {
  // 查看文件的分享情况
  console.log('查看文件分享:', file)
}

const showAddUserModal = (file: any) => {
  currentFile.value = file
  showUserModal.value = true
  searchUsers()
}

const closeUserModal = () => {
  showUserModal.value = false
  currentFile.value = null
  userSearchQuery.value = ''
  searchResults.value = []
}

const searchUsers = async () => {
  // 模拟用户搜索
  if (!userSearchQuery.value.trim()) {
    searchResults.value = [
      { id: 1, name: '张三', email: 'zhang@example.com', avatar: '' },
      { id: 2, name: '李四', email: 'li@example.com', avatar: '' },
      { id: 3, name: '王五', email: 'wang@example.com', avatar: '' }
    ]
  } else {
    searchResults.value = [
      { id: 1, name: '张三', email: 'zhang@example.com', avatar: '' },
      { id: 2, name: '李四', email: 'li@example.com', avatar: '' }
    ].filter(user =>
      user.name.includes(userSearchQuery.value) ||
      user.email.includes(userSearchQuery.value)
    )
  }
}

const addAllowedUser = async (user: any) => {
  if (!currentFile.value) return

  try {
    const allowedUsers = [...currentFile.value.permission.allowedUsers, user.id]
    await updateFilePermission(currentFile.value, 'allowedUsers', allowedUsers)
    closeUserModal()
    Message.success(`已添加用户 ${user.name}`)
  } catch (error) {
    Message.error('添加用户失败')
  }
}

const removeAllowedUser = async (file: any, userId: number) => {
  try {
    const allowedUsers = file.permission.allowedUsers.filter(id => id !== userId)
    await updateFilePermission(file, 'allowedUsers', allowedUsers)
    Message.success('已移除用户')
  } catch (error) {
    Message.error('移除用户失败')
  }
}

const toggleRolePermission = (role: any, permissionKey: string, enabled: boolean) => {
  if (enabled) {
    role.permissions.push(permissionKey)
  } else {
    const index = role.permissions.indexOf(permissionKey)
    if (index > -1) {
      role.permissions.splice(index, 1)
    }
  }

  // 这里应该调用API保存角色权限
  console.log('更新角色权限:', role.key, permissionKey, enabled)
}

// 数据加载
const loadMediaFiles = () => {
  // 模拟加载媒体文件数据
  mediaFiles.value = [
    {
      id: 1,
      name: '家庭旅行照片.jpg',
      type: 'image',
      size: 3200000,
      createTime: '2024-01-15',
      thumbnail: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=100&h=100&fit=crop',
      permission: {
        viewPermission: 'family',
        downloadPermission: 'family',
        commentPermission: 'family',
        allowedUsers: [],
        allowDownload: true,
        allowComment: true
      }
    },
    {
      id: 2,
      name: '生日聚会视频.mp4',
      type: 'video',
      size: 45600000,
      createTime: '2024-01-10',
      thumbnail: 'https://images.unsplash.com/photo-1511632765486-a01980e01a18?w=100&h=100&fit=crop',
      permission: {
        viewPermission: 'custom',
        downloadPermission: 'owner',
        commentPermission: 'family',
        allowedUsers: [1, 2],
        allowDownload: false,
        allowComment: true
      }
    }
  ]
}

const loadAccessLogs = () => {
  // 模拟加载访问日志
  accessLogs.value = [
    {
      id: 1,
      message: '查看了文件 "家庭旅行照片.jpg"',
      userName: '李四',
      action: 'view',
      timestamp: '2024-01-20 14:30:00',
      ipAddress: '192.168.1.100',
      result: 'success'
    },
    {
      id: 2,
      message: '尝试下载文件 "生日聚会视频.mp4"',
      userName: '王五',
      action: 'download',
      timestamp: '2024-01-20 14:25:00',
      ipAddress: '192.168.1.101',
      result: 'denied'
    },
    {
      id: 3,
      message: '创建了文件分享链接',
      userName: '张三',
      action: 'share',
      timestamp: '2024-01-20 14:20:00',
      ipAddress: '192.168.1.102',
      result: 'success'
    }
  ]
}

// 初始化
onMounted(() => {
  loadMediaFiles()
  loadAccessLogs()
})
</script>

<style lang="scss" scoped>
.permission-manager {
  .manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;

    .header-tabs {
      display: flex;
      gap: 0.5rem;

      .tab-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: none;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        cursor: pointer;
        color: #64748b;
        font-size: 0.9rem;
        transition: all 0.2s ease;

        &:hover {
          background: #f1f5f9;
          color: #374151;
        }

        &.active {
          background: #3b82f6;
          color: white;
          border-color: #3b82f6;
        }
      }
    }

    .header-actions {
      .btn-text {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        background: none;
        border: none;
        color: #64748b;
        cursor: pointer;
        border-radius: 6px;

        &:hover {
          background: #f1f5f9;
          color: #374151;
        }

        svg {
          width: 16px;
          height: 16px;
        }
      }
    }
  }

  .tab-content {
    .filters-section {
      background: #f8fafc;
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1.5rem;

      .filters-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;

        .filter-item {
          label {
            display: block;
            font-size: 0.85rem;
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
          }

          select,
          input {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 0.9rem;

            &:focus {
              outline: none;
              border-color: #3b82f6;
            }
          }
        }
      }
    }

    .batch-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      background: rgba(59, 130, 246, 0.05);
      border: 1px solid rgba(59, 130, 246, 0.2);
      border-radius: 8px;
      margin-bottom: 1rem;

      .selection-info {
        font-weight: 500;
        color: #3b82f6;
      }

      .action-buttons {
        display: flex;
        gap: 0.5rem;

        .btn {
          display: flex;
          align-items: center;
          gap: 0.25rem;
          padding: 0.5rem 0.75rem;
          background: white;
          border: 1px solid #d1d5db;
          border-radius: 6px;
          font-size: 0.8rem;
          cursor: pointer;
          transition: all 0.2s ease;

          &:hover {
            background: #f9fafb;
            border-color: #9ca3af;
          }

          svg {
            width: 14px;
            height: 14px;
          }
        }
      }
    }

    .files-list {
      .list-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: #f8fafc;
        border-radius: 8px 8px 0 0;
        border: 1px solid #e5e7eb;

        .select-all {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.9rem;
          font-weight: 500;
          color: #374151;
          cursor: pointer;

          input[type="checkbox"] {
            accent-color: #3b82f6;
          }
        }

        .header-columns {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr auto;
          gap: 1rem;
          flex: 1;

          .column {
            font-size: 0.85rem;
            font-weight: 600;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.05em;
          }
        }
      }

      .files-items {
        border: 1px solid #e5e7eb;
        border-top: none;
        border-radius: 0 0 8px 8px;

        .file-item {
          display: flex;
          align-items: center;
          gap: 1rem;
          padding: 1rem;
          border-bottom: 1px solid #f3f4f6;

          &:last-child {
            border-bottom: none;
          }

          &:hover {
            background: #f9fafb;
          }

          .file-select {
            input[type="checkbox"] {
              accent-color: #3b82f6;
            }
          }

          .file-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex: 2;
            min-width: 0;

            .file-thumbnail {
              width: 48px;
              height: 48px;
              border-radius: 6px;
              overflow: hidden;
              flex-shrink: 0;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }

              .file-icon {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #f3f4f6;

                svg {
                  width: 20px;
                  height: 20px;
                  color: #6b7280;
                }

                &.video {
                  background: rgba(239, 68, 68, 0.1);
                  svg { color: #ef4444; }
                }

                &.audio {
                  background: rgba(16, 185, 129, 0.1);
                  svg { color: #10b981; }
                }
              }
            }

            .file-details {
              flex: 1;
              min-width: 0;

              .file-name {
                font-weight: 500;
                color: #1e293b;
                margin-bottom: 0.25rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .file-meta {
                display: flex;
                gap: 1rem;
                font-size: 0.8rem;
                color: #64748b;

                .file-size,
                .file-date {
                  white-space: nowrap;
                }
              }
            }
          }

          .permissions-settings {
            flex: 1;

            .permission-level {
              margin-bottom: 0.5rem;

              select {
                width: 100%;
                padding: 0.5rem;
                border: 1px solid #d1d5db;
                border-radius: 6px;
                font-size: 0.85rem;

                &:focus {
                  outline: none;
                  border-color: #3b82f6;
                }
              }
            }

            .permission-options {
              display: flex;
              gap: 0.75rem;

              .permission-checkbox {
                display: flex;
                align-items: center;
                gap: 0.25rem;
                font-size: 0.8rem;
                color: #64748b;
                cursor: pointer;

                input[type="checkbox"] {
                  accent-color: #3b82f6;
                }
              }
            }
          }

          .access-control {
            flex: 1;

            .allowed-users {
              .user-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 0.25rem;

                .user-tag {
                  display: flex;
                  align-items: center;
                  gap: 0.25rem;
                  padding: 0.25rem 0.5rem;
                  background: rgba(59, 130, 246, 0.1);
                  color: #3b82f6;
                  border-radius: 12px;
                  font-size: 0.75rem;

                  button {
                    background: none;
                    border: none;
                    color: #3b82f6;
                    cursor: pointer;
                    font-size: 0.75rem;
                    padding: 0;
                    width: 16px;
                    height: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;

                    &:hover {
                      background: rgba(59, 130, 246, 0.2);
                    }
                  }
                }

                .add-user-btn {
                  padding: 0.25rem 0.5rem;
                  background: #f1f5f9;
                  color: #64748b;
                  border: 1px dashed #d1d5db;
                  border-radius: 12px;
                  font-size: 0.75rem;
                  cursor: pointer;

                  &:hover {
                    background: #e2e8f0;
                  }
                }
              }
            }

            .access-info {
              .access-level {
                display: inline-block;
                padding: 0.25rem 0.5rem;
                border-radius: 12px;
                font-size: 0.75rem;
                font-weight: 500;

                &.all {
                  background: rgba(16, 185, 129, 0.1);
                  color: #10b981;
                }

                &.family {
                  background: rgba(59, 130, 246, 0.1);
                  color: #3b82f6;
                }

                &.custom {
                  background: rgba(245, 158, 11, 0.1);
                  color: #f59e0b;
                }
              }
            }
          }

          .item-actions {
            display: flex;
            gap: 0.5rem;

            .action-btn {
              width: 32px;
              height: 32px;
              background: none;
              border: 1px solid #e5e7eb;
              border-radius: 6px;
              cursor: pointer;
              color: #64748b;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.2s ease;

              &:hover {
                background: #f9fafb;
                color: #374151;
              }

              svg {
                width: 14px;
                height: 14px;
              }
            }
          }
        }
      }

      .empty-state {
        text-align: center;
        padding: 3rem;
        color: #64748b;
        border: 1px solid #e5e7eb;
        border-top: none;
        border-radius: 0 0 8px 8px;

        svg {
          width: 48px;
          height: 48px;
          margin-bottom: 1rem;
          opacity: 0.5;
        }

        p {
          margin: 0;
          font-size: 0.9rem;
        }
      }
    }

    .roles-management {
      .roles-header {
        margin-bottom: 2rem;

        h4 {
          font-size: 1.1rem;
          font-weight: 600;
          color: #1e293b;
          margin: 0 0 0.5rem 0;
        }

        p {
          color: #64748b;
          margin: 0;
        }
      }

      .roles-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        .role-item {
          padding: 1.5rem;
          border: 1px solid #e5e7eb;
          border-radius: 12px;

          .role-info {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;

            .role-icon {
              width: 48px;
              height: 48px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;

              &.admin {
                background: rgba(239, 68, 68, 0.1);
                color: #ef4444;
              }

              &.member {
                background: rgba(59, 130, 246, 0.1);
                color: #3b82f6;
              }

              &.viewer {
                background: rgba(107, 114, 128, 0.1);
                color: #6b7280;
              }
            }

            .role-details {
              flex: 1;

              h5 {
                font-size: 1rem;
                font-weight: 600;
                color: #1e293b;
                margin: 0 0 0.25rem 0;
              }

              p {
                color: #64748b;
                font-size: 0.9rem;
                margin: 0;
              }
            }
          }

          .role-permissions {
            .permissions-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
              gap: 1rem;

              .permission-item {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                padding: 0.75rem;
                border: 1px solid #f3f4f6;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.2s ease;

                &:hover {
                  background: #f9fafb;
                }

                input[type="checkbox"] {
                  accent-color: #3b82f6;
                }

                .permission-content {
                  flex: 1;

                  .permission-label {
                    font-weight: 500;
                    color: #1e293b;
                    margin-bottom: 0.25rem;
                  }

                  .permission-desc {
                    font-size: 0.8rem;
                    color: #64748b;
                  }
                }
              }
            }
          }
        }
      }
    }

    .access-logs {
      .logs-filters {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.5rem;
        padding: 1rem;
        background: #f8fafc;
        border-radius: 8px;

        .filter-group {
          flex: 1;

          label {
            display: block;
            font-size: 0.85rem;
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
          }

          select {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #d1d5db;
            border-radius: 6px;

            &:focus {
              outline: none;
              border-color: #3b82f6;
            }
          }
        }
      }

      .logs-list {
        .log-item {
          display: flex;
          align-items: center;
          gap: 1rem;
          padding: 1rem;
          border: 1px solid #e5e7eb;
          border-radius: 8px;
          margin-bottom: 0.5rem;

          &:last-child {
            margin-bottom: 0;
          }

          .log-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            &.view {
              background: rgba(59, 130, 246, 0.1);
              color: #3b82f6;
            }

            &.download {
              background: rgba(16, 185, 129, 0.1);
              color: #10b981;
            }

            &.share {
              background: rgba(245, 158, 11, 0.1);
              color: #f59e0b;
            }

            &.permission_change {
              background: rgba(139, 92, 246, 0.1);
              color: #8b5cf6;
            }
          }

          .log-content {
            flex: 1;
            min-width: 0;

            .log-message {
              font-weight: 500;
              color: #1e293b;
              margin-bottom: 0.25rem;
            }

            .log-meta {
              display: flex;
              gap: 1rem;
              font-size: 0.8rem;
              color: #64748b;

              .log-user {
                font-weight: 500;
              }
            }
          }

          .log-status {
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;

            &.success {
              background: rgba(16, 185, 129, 0.1);
              color: #10b981;
            }

            &.denied {
              background: rgba(239, 68, 68, 0.1);
              color: #ef4444;
            }

            &.failed {
              background: rgba(245, 158, 11, 0.1);
              color: #f59e0b;
            }
          }
        }
      }
    }
  }
}

// 用户模态框
.user-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  .modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow: hidden;

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.5rem;
      border-bottom: 1px solid #e5e7eb;

      h4 {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
      }

      .modal-close {
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        color: #64748b;
        font-size: 1.2rem;

        &:hover {
          background: #f1f5f9;
        }
      }
    }

    .modal-body {
      padding: 1.5rem;

      .user-search {
        margin-bottom: 1rem;

        input {
          width: 100%;
          padding: 0.75rem;
          border: 1px solid #d1d5db;
          border-radius: 8px;

          &:focus {
            outline: none;
            border-color: #3b82f6;
          }
        }
      }

      .user-results {
        max-height: 200px;
        overflow-y: auto;

        .user-result-item {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.75rem;
          border-radius: 8px;
          cursor: pointer;

          &:hover {
            background: #f9fafb;
          }

          .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            overflow: hidden;
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .user-info {
            flex: 1;

            .user-name {
              font-weight: 500;
              color: #1e293b;
              margin-bottom: 0.25rem;
            }

            .user-email {
              font-size: 0.8rem;
              color: #64748b;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .permission-manager {
    .manager-header {
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;

      .header-tabs {
        justify-content: center;
      }
    }

    .files-list {
      .list-header {
        flex-direction: column;
        gap: 0.75rem;

        .header-columns {
          display: none;
        }
      }

      .file-item {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;

        .file-info {
          flex: none;
        }
      }
    }

    .roles-list .role-item .role-permissions .permissions-grid {
      grid-template-columns: 1fr;
    }
  }
}
</style>
